<style>
	.applydan{
		padding: 0 300px 0 0
	}
	.applydan textarea{
		height: 140px;
	}
	.applydan .upload-demo{
		width: 400px;
		margin-left: 20px;
	}
	
	.el-dialog{
		width: 900px;
	}
	
	.dialog_content .liucheng{
		height: 450px;
		background: #f9f9f9;
	}
	.dialog_content .liucheng .left_liu{
		float: left;
		width: 190px;
		height: 450px;
		overflow-y: scroll;
		overflow-x: hidden;
		    background: #e6e5e5;
	}
	.dialog_content .liucheng .left_liu li{
		padding: 10px;
		text-align: left;
		cursor: pointer;
	}
	.dialog_content .liucheng .left_liu li.active{
		background: #4e97e2;
		color: white;
	}
	.dialog_content .liucheng .right_liu{
		text-align: center;
		    height: 450px;
    	overflow: scroll;
	}
	
</style>


<template>
	<section class="applydan">
		<!--打开流程图-->
		<el-dialog center append-to-body title="流程图" :visible.sync="dialogLiuchengVisible" :modal = "false" :close-on-click-modal='true'><!--工单流程图-->
		  <div class="dialog_content">
		  		<div class="liucheng">
		  			<div class="left_liu">
		  				<ul>
		  					<li v-for="item in liuchengLi" v-if="item.deploymentId!='-1'&&item.isConfig===true"  @click="chooseLi(item.deploymentId,item.name)"  :class="{'active': hasChooseLi === item.deploymentId}">{{item.name}}</li>
		  				</ul>
		  			</div>
		  			<div class="right_liu">
		  				<img style="width: 600px;;" :src="liuchengImg"/>
		  			</div>
		  		</div>
		  		<p style="text-align: right;margin-top: 15px;">
		  			<el-button type="primary" @click="chooseLiucheng">选择</el-button>
		  			<el-button type="primary" @click="cancleLiucheng">取消</el-button>
		  		</p>
		  </div>
		</el-dialog>
		
		<!--表单-->
		<el-form :model="applyForm" label-width="100px" class="demo-ruleForm">
 			 <el-form-item label="活动名称：">
		    		<el-input v-model="applyForm.applyTitle" style="width: 600px;" placeholder="请输入内容" ></el-input>
		  	  </el-form-item>
		  	  <el-form-item label="工单流程：">
		    		<el-input v-model="applyForm.workProcessName" style="width: 530px;" placeholder="请选择需要的流程" >www</el-input>
		    		<el-button type="primary" @click="checkLiucheng">选择</el-button>
		  	  </el-form-item>
		  	  <el-form-item label="情况描述：">
		    		<el-input v-model="applyForm.description" type="textarea"  style="width: 600px;" placeholder="请输入内容" ></el-input>
		  	  </el-form-item>
		  	  <el-form-item label="协助要求：">
		    		<el-input v-model="applyForm.assistanceRequirements" type="textarea" style="width: 600px;" placeholder="请输入内容" ></el-input>
		  	  </el-form-item>
		  	  
		  	  <!--文件上传-->
			<label class="el-form-item__label" style="width: 100px;">辅助资料：</label>
				<el-upload
				  class="upload-demo"
				  ref="upload"
				  :action="uploadPath()"
				  :on-success = "handleSuccess"
				  :on-change = "handleChange"
				  :file-list="fileList3"
				  :before-upload = "beforeUpload"
				  :auto-upload="false"
				  >
				  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
				</el-upload>
		</el-form>
		<!--上传按钮-->
		<p style="text-align: center;"><el-button  size="small" type="primary" @click="submitUpload">提交申请</el-button></p>
			
	</section>
</template>

<script>
	import {apiApplyDan,apiCheckLiucheng,apiChooseLiucheng,apiUpload,apiGuanLian} from '../css_img_js/xieTongApi.js'
	export default{
		data(){
			return{
				applyForm:{
					applyTitle:'',
					workProcess:'',
					workProcessName:'',
					description:'',
					assistanceRequirements:'',
				},
				loading:'',
				formId:'',
				sid:'-1',
				fileList3:[],/*保持已经上传的filelist*/
				fileList4:[],/*保存未上传的filelist*/
				maxSize:1073741824,/*1Gb*/
				alertmsg:'总文件不能超过1Gb',
				dialogLiuchengVisible:false,
				hasChooseLi:'',
				liuchengImg:'',
				liuchengLi:[
					{
						name:'流程图一',
						val:1,
					},
				],
				uploadId:'',
			}
		},
		methods:{
			chooseLi(val,name){/*显示图片*/
				if(val==='-1'){
					this.$message.error('暂时没部署');
					return false;
				}
				this.applyForm.workProcessName = name;
				this.hasChooseLi = val;
				console.log(this.hasChooseLi);
				apiChooseLiucheng(this,this.hasChooseLi);
			},
			checkLiucheng(){/*·打开流程选项*/
				this.dialogLiuchengVisible=true;
				this.loadingOpen('.el-dialog');
				apiCheckLiucheng(this).then(()=>{
					this.loadingClose();
				})
			},
			cancleLiucheng(){/*关闭流程选项*/
				this.dialogLiuchengVisible=false;
			},
			chooseLiucheng(){/*选中流程图*/
				this.applyForm.workProcess = this.hasChooseLi;
				this.dialogLiuchengVisible=false;
			},
			uploadPath(){/*上传图片的地址*/
				return apiUpload(this.formId,this.sid);
			},
			submitUpload() {/*图片提交*/
				this.loadingOpen('.applydan');
				console.log(this.fileList4);
//				if(this.fileList4.length!=0){/*上传列表有东西*/
//						this.uploadPath();
//		       			this.$refs.upload.submit();/*文件上传*/
//				}else{
//					this.unloadAll();
//				}
				this.unloadAll();
		    },
		    loadingClose(){/*关闭加载*/
		    	this.loading.close();
		    },
		    loadingOpen(target){/*显示加载中图标*/
		    	this.loading = this.$loading({
			      text: '加载中',
			      target: document.querySelector(target)
			    });
		    },
		    beforeUpload(file){/*图片上传前检验*/
		    	/*检验文件是否超过限定的大小*/
		    	let this_size = 0;
		    	let go_on = true;
		    	console.log('beforeUpload');
				for(let i in this.fileList4){
					this_size+=this.fileList4[i].size;
					if(this_size>=this.maxSize){
						go_on = false;
						this.$message.error(this.alertmsg);
						return false;
					}
				}
				console.log(this.fileList3);
		    },
			handleChange(file, fileList){/*处理变化*/
				let this_size = 0;
				for(let i in fileList){
					this_size+=fileList[i].size;
					if(this_size>=this.maxSize){
						alert(this.alertmsg);
						    this.$notify.error({
					          title: '错误11',
					          message: this.alertmsg,
					        });
					}/*存入数据中*/
				}
				this.fileList4 = fileList;
				console.log(this.fileList4)
			},
		    handleSuccess(response, file, fileList){/*上传文件成功*/
		    	console.log(JSON.parse(response));
		    	let parse_json = JSON.parse(response);
		    	
		    	if(parse_json.code==='200'||parse_json.code===200){
		    		this.uploadId = parse_json.id;
		    		apiGuanLian(this.uploadId,this.formId,'-1');
		    		this.$message.success('申请成功，请在我的工单页面查询');
		    		this.loadingClose();
		    	}
		    	console.log(file);
		    	console.log(fileList);
		    },
		    unloadAll(){/*上传全部*/
		   		let _this = this;
		    	apiApplyDan(this,this.applyForm).then((res)=>{
		    		if(res.data.result.code==="200"||res.data.result.code===200){
						_this.formId = res.data.result.data.id;/*工单id*/
						console.log(_this.formId);
							if(_this.fileList4.length!=0){/*上传列表有东西*/
								_this.uploadPath();
				       			_this.$refs.upload.submit();/*文件上传*/
							}else{
								this.$message.success('申请成功，请在我的工单页面查询');
							}
					}
					this.loadingClose();
				})
		    }
		}
	}
</script>

